<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { OIcon } from '@opensig/opendesign';
import { NAVS } from '@/config/nav.ts';
import IconOutlink from '~icons/app/icon-outlink.svg';
import { useCommonStore } from '@/stores/common';
import { storeToRefs } from 'pinia';
import { useScreen } from '@/composables/useScreen.ts';
import HeaderCodeLink from '@/components/header/HeaderCodeLink.vue';
import HeaderTheme from '@/components/header/HeaderTheme.vue';
import { isClient } from '@opensig/opendesign';

const commonStore = useCommonStore();
import { useMeetingStore } from '@/stores/meeting';

const { showMobileNav } = storeToRefs(commonStore);
import { $t } from '@/i18n';

const activeMenu = ref(0);

const clickMenu = (idx) => {
  const href = navs.value[idx]?.href;
  activeMenu.value = idx;
  if (href) {
    location.href = href;
  }
};

const clickChildTab = (tab) => {
  if (!tab.disabled) {
    commonStore.toggleMobileNav();
    location.href = tab.href;
  }
};

const { gtPadV } = useScreen();
watch(
  () => gtPadV.value,
  (val) => {
    if (val && showMobileNav.value) {
      commonStore.toggleMobileNav();
    }
  },
);

// -------------------- 过滤NAVS --------------------
const meetingStore = useMeetingStore();
const filterPerm = (navItem: any, permMap: any) => {
  if (navItem.checkPermKey) {
    return permMap[navItem.checkPermKey];
  }
  return true;
};
const navs = computed(() => {
  const path = [] as string[];
  let currentNavs = [];
  const permMap = {
    'meeting': meetingStore.hasPerm,
  };
  try {
    currentNavs = NAVS.filter(navItem => filterPerm(navItem, permMap)).map(function fn(navItem: any) {
      path.push(navItem.label);
      const res = {
        ...navItem,
        _path: [...path],
      };
      if (navItem.children) {
        res.children = navItem.children.filter(navItem => filterPerm(navItem, permMap)).map(fn);
      }
      path.pop();
      return res;
    });
  } catch {
    currentNavs = NAVS;
  }
  return currentNavs;
});
</script>

<template>
  <div class="nav-wrapper" v-if="showMobileNav">
    <div class="shadow"></div>
    <div class="list-wrapper">
      <div class="list-left">
        <div v-for="(menu, mIdx) in navs" :key="mIdx" :class="['menu-item', mIdx === activeMenu && 'active']"
             @click="clickMenu(mIdx)">{{ menu.label }}
        </div>
        <div class="left-bottom">
          <HeaderCodeLink />
          <!--          <HeaderLang />-->
          <HeaderTheme v-if="isClient" />
        </div>
      </div>
      <div class="list-right">
        <div v-for="(childTab, idx) in navs[activeMenu]?.children || []" :key="idx" class="list-item"
             @click="clickChildTab(childTab)">
          <template v-if="childTab.disabled">
            <div class="tab-disabled">
              <span>{{ childTab.label }}</span>
              <span class="disabled-tag">{{ $t('header.notOnline') }}</span>
            </div>
          </template>
          <template v-else @click="redirect(childTab.href)">
            {{ childTab.label }}
            <OIcon v-if="childTab.jumpOut" class="jump-out-icon">
              <IconOutlink />
            </OIcon>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.nav-wrapper {
  position: fixed;
  top: var(--layout-header-height);
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--o-color-fill2);
  z-index: calc(var(--layout-header-z-index) - 1);

  .list-wrapper {
    display: flex;
    align-items: stretch;
    height: 100%;
    color: var(--o-color-info1);

    .list-left {
      width: 100px;
      height: 100%;
      flex-shrink: 0;
      background-color: var(--o-color-fill1);
      display: flex;
      flex-direction: column;

      .menu-item {
        height: 48px;
        line-height: 48px;
        text-align: center;
        font-weight: 500;

        &.active {
          background-color: var(--o-color-fill2);
        }
      }

      .left-bottom {
        margin-top: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
        padding-bottom: 36px;
      }

      :deep(.left-bottom) {
        .header-code,
        .header-lang {
          margin-right: 0;
        }
      }
    }

    .list-right {
      flex-grow: 1;
      padding: 0 12px;

      .list-item {
        height: 46px;
        display: flex;
        align-items: center;

        .jump-out-icon {
          --icon-size: 16px;
          margin-left: 4px;
        }

        .tab-disabled {
          color: var(--o-color-info4);
          display: flex;
          align-items: center;
          cursor: not-allowed;

          .disabled-tag {
            margin-left: var(--o-gap-1);
            border: 1px solid rgba(224, 226, 230, 1);
            border-radius: var(--o-radius-xs);
            font-size: 10px;
            color: var(--o-color-info3);
            height: 16px;
            width: 38px;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }

        & + .list-item {
          border-top: 1px solid var(--o-color-control4);
        }
      }
    }
  }
}
</style>
